<template>
  <el-dialog
    title="变更邮箱"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="500px"
    custom-class="custom-class-line"
    @close="closeModal">
    <el-form size="small" ref="registerForm" :model="registerForm" :rules="registerRules" class="find-password-email-form" label-width="140px" label-position="left">
      <el-form-item label="手机账号：">
        18312458205
      </el-form-item>
      <el-form-item label="账号名：">
        admin
      </el-form-item>
      <el-form-item label="账号类型：">
        系统管理员
      </el-form-item>
      <el-form-item label="创建日期：">
        20180325
      </el-form-item>
      <el-form-item label="账号状态：">
        正常
      </el-form-item>
      <el-form-item label="已绑定企业邮箱：">
        18312458205@139.com
      </el-form-item>
      <el-form-item prop="code" label="手机验证码：">
        <el-input
          size="small"
          type="text"
          v-model="registerForm.code"
          placeholder="验证码"
          style="width:80px"
          auto-complete="new-password"
          @keyup.enter.native="handleRegister"
        >
        </el-input>
        <el-button
          size="small"
          style="margin-left:10px"
          :disabled="!canSendSms || isDisabled"
          @click="sendMessage"
        >{{ getSms }}</el-button>
      </el-form-item>
      <el-form-item prop="email" label="绑定新企业邮箱：">
        <el-input  style="width:250px" v-model="registerForm.email" type="text" auto-complete="new-password" placeholder="邮箱地址" @input="handleEmailInput">
        </el-input>
      </el-form-item>
      <el-form-item prop="emailCode" label="邮箱验证码：">
        <el-input
          size="small"
          type="text"
          v-model="registerForm.emailCode"
          placeholder="验证码"
          style="width:80px"
          auto-complete="new-password"
        >
        </el-input>
        <el-button
          size="small"
          style="margin-left:10px"
          :disabled="!canSendSmsEmail || isDisabledEmail"
          @click="sendMessageEmail"
        >{{ getSmsEmail }}</el-button>
      </el-form-item>
      <div class="text-center">
        <el-form-item label="" label-width="0">
          <el-button
            :loading="loading"
            type="primary"
            style="width:100px;"
            @click.native.prevent="handleRegister"
          >
            <span>确定更改</span>
          </el-button>
            <el-button
              type="cancel"
              style="width:100px;"
              @click="closeModal"
            >
              <span>取消</span>
            </el-button>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { getCodeImg, register,regSendSms,checkRegister } from "@/api/login";
import { validEmail } from "@/utils/validate"
export default {
  name: "updateEmail",
  data() {
    return {
      registerForm: {
        phonenumber: "18312458205",
        password: "",
        confirmPassword: "",
        code: "",
        email: '',
        emailCode: '',
      },
      registerRules: {
        email: [
          { required: true, trigger: "blur", message: "请输入邮箱地址" },
          {
            validator:  (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入邮箱'));
              } else if (!validEmail(value)) {
                callback(new Error('邮箱格式错误'));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
        emailCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ]
      },
      loading: false,
      canSendSms: true,
      timer: null,
      getSms: '获取验证码',
      count: 60,
      isDisabled: false,
      // 邮箱验证码
      canSendSmsEmail: false,
      timerEmail: null,
      getSmsEmail: '获取验证码',
      countEmail: 60,
      isDisabledEmail: false,
      dialogVisible: false
    };
  },
  created() {
  },
  methods: {
    showModal() {
      this.dialogVisible = true
    },
    closeModal() {
      this.dialogVisible = false
      this.$emit('close')
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
        }
      });
    },
    sendMessage() {
      if (!this.timer) {
        this.isDisabled = true
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--
            if (this.count !== 0) {
              this.getSms = `${this.count}s`
            } else {
              clearInterval(this.timer)
              this.getSms = '获取验证码'
              this.count = 60
              this.timer = null
              this.isDisabled = false
            }
          }
        }, 1000)
      }
      regSendSms({ phonenumber: this.registerForm.phonenumber }).then((res) => {
        if (res.data === true) {
          this.$message.success(res.msg)
        }
      }).catch(err => {
        clearInterval(this.timer)
        this.getSms = '获取验证码'
        this.count = 60
        this.timer = null
        this.isDisabled = false
      })
    },
    sendMessageEmail() {
      if (!this.timerEmail) {
        this.isDisabledEmail = true
        this.timerEmail = setInterval(() => {
          if (this.countEmail > 0 && this.countEmail <= 60) {
            this.countEmail--
            if (this.countEmail !== 0) {
              this.getSmsEmail = `${this.countEmail}s`
            } else {
              clearInterval(this.timerEmail)
              this.getSmsEmail = '获取验证码'
              this.countEmail = 60
              this.timerEmail = null
              this.isDisabledEmail = false
            }
          }
        }, 1000)
      }
      regSendSms({ email: this.registerForm.email }).then((res) => {
        if (res.data === true) {
          this.$message.success(res.msg)
        }
      }).catch(err => {
        clearInterval(this.timerEmail)
        this.getSmsEmail = '获取验证码'
        this.countEmail = 60
        this.timerEmail = null
        this.isDisabledEmail = false
      })
    },
    handleEmailInput(val) {
      this.$refs.registerForm.validateField('email', (msg) => {
        // 调接口校验邮箱是否已经被绑定
        if (!msg) {
          this.canSendSmsEmail = true
        } else {
          this.canSendSmsEmail = false
        }
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.find-password-email {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .find-password-email-form {
    border-radius: 6px;
    background: #ffffff;
    padding: 25px 25px 5px 25px;
    .el-radio-group {
      width: 100%!important;
    }
    .el-radio-button {
      width: 50%!important;
    }
    .el-radio-button__inner {
      width: 100%!important;
    }
  }
  .find-password-email-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .find-password-email-success {
    .el-form-item {
      margin-bottom: 0!important;
    }
  }
  .el-find-password-email-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 40px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
}
</style>
